<template>
  <div>

    <el-card class="update-log" style="width: 800px; height: 700px; margin: 30px">

      <el-tabs v-model="activeName">

        <el-tab-pane label=" 在线充值" name="first">
          <el-row>
            <el-col :span="12">
              <h4>账户信息</h4>
              <ul>
                <dl>负责人：{{ merchant.functionary }}</dl>
                <dl>商户号：{{ merchant.merchantCode }}</dl>
                <dl>关联企业：{{ merchant.comName == '' ? '未添加' : merchant.comName }}
                  <el-button v-if="merchant.comName == ''" style="margin-left: 10px"
                             size="mini"
                             icon="el-icon-s-home"
                             plain
                             @click="tobcqyxx">点击去补充企业信息
                  </el-button>
                </dl>
                <dl>当前余额：{{ merchant.balance }} 元</dl>
              </ul>
            </el-col>
          </el-row>

          <el-form :model="numForm" :rules="numRules" ref="numForm" size="medium" label-width="80px"
                   label-position="left">
            <el-row gutter="15">
              <el-col :span="8">
                <el-form-item label="充值额度" prop="srczed">
                  <el-input v-model.number="numForm.srczed" placeholder="请输入充值额度" clearable prefix-icon='el-icon-s-shop'
                            :style="{width: '100%'}"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label-width="-5px">
                  <el-button v-if="!open" @click="submitForm" type="primary" size="medium"> 充值</el-button>
                  <el-button v-else @click="cancel()" type="primary" size="medium"> 取消</el-button>
                </el-form-item>
              </el-col>

            </el-row>

            <el-row>
              <el-col :span="12" v-show="open">
                <el-form-item size="large">
                  <p style="font-size:15px;color:#04BE02">请微信扫码支付 金额：{{ numForm.srczed }}元 </p>
                  <div style="width: 200px;height: 200px" id="qrcode" ref="qrCodeDiv"></div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>

        </el-tab-pane>

        <el-tab-pane label="对公充值" name="second">
          <el-descriptions title="联系信息" :column="1" border>
            <el-descriptions-item label="联系人" label-class-name="my-label" content-class-name="my-content">陈先生
            </el-descriptions-item>
            <el-descriptions-item label="手机号">15682555577</el-descriptions-item>
            <el-descriptions-item label="微信">bycracker</el-descriptions-item>
            <el-descriptions-item label="QQ">
              <a href="http://wpa.qq.com/msgrd?v=3&uin=29397281&site=在线客服&menu=yes">29397281(点击去联系)</a>

            </el-descriptions-item>
            <el-descriptions-item label="开户名称">联系上方联系人</el-descriptions-item>
            <el-descriptions-item label="开户银行">联系上方联系人</el-descriptions-item>
            <el-descriptions-item label="银行账号">联系上方联系人</el-descriptions-item>
            <el-descriptions-item label="备注">打款成功后，请将付款截图发送给上方联系人进行充值。</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>

      </el-tabs>

    </el-card>
  </div>
</template>
<script>
  import {addOrder, getMerchant, lunxunOrder} from "@/api/payOrder/payOrder";
  //所需页面导入
  import QRCode from 'qrcodejs2'

  export default {
    components: {},
    props: [],
    data() {
      return {
        activeName: 'first',
        intervalwx: null,

        numForm: {
          xzczed: 1000,
          srczed: 1000
        },
        outTradeNo: null,
        open: false,
        numRules: {
          srczed: [
            {required: true, message: "请输入金额", trigger: "blur"},
            {type: "number", message: "输入充值额有误", trigger: 'blur'}
          ]
        },
        merchant: {
          comName: '',
          balance: '',
          merchantCode: '',
          secretKey: ''
        },
        xzczedOptions: [{
          "label": "500",
          "value": 500
        }, {
          "label": "1000",
          "value": 1000
        }, {
          "label": "2000",
          "value": 2000
        }, {
          "label": "3000",
          "value": 3000
        }, {
          "label": "4000",
          "value": 4000
        }, {
          "label": "5000",
          "value": 5000
        }],
      }
    },
    computed: {},
    watch: {
      'numForm.xzczed': {
        handler(newVal, oldVal) {
          this.numForm.srczed = 0
        },
      },
      'numForm.srczed': {
        handler(newVal, oldVal) {
          this.numForm.xzczed = 0
        },
      }

    },
    created() {
      getMerchant(this.$store.state.user.id).then(response => {
          this.merchant = response.data
        }
      );
    },
    mounted() {
    },
    beforeDestroy() {
      this.cancel()
    },

    methods: {

      tobcqyxx() {
        this.$router.push({path: "/user/profile", query: {zs: "merchant"}}).catch(() => {
        });
      },

      cancel() {
        this.open = false
        clearInterval(this.intervalwx);
        this.intervalwx = null
      },

      submitForm() {
        this.$refs.numForm.validate(valid => {
          if (valid) {
            var reqData = {
              account: this.merchant.merchantCode,
              body: '聚法数据余额充值(' + this.merchant.merchantCode + ')',
              totalFee: this.numForm.srczed
            }
            addOrder(reqData).then(response => {
              this.open = true;
              var payUrl = response.data.payUrl
              this.outTradeNo = response.data.outTradeNo

              this.$nextTick(() => {
                this.$refs.qrCodeDiv.innerHTML = "";//清空一下
                new QRCode('qrcode', {
                  text: payUrl, // 需要转换为二维码的内容
                  width: 200,
                  height: 200,
                  colorDark: '#000000',
                  colorLight: '#ffffff',
                  correctLevel: QRCode.CorrectLevel.H
                })
              })
              // 开始轮询
              this.intervalwx = window.setInterval(() => {
                lunxunOrder(this.outTradeNo).then(res => {
                  if (res.msg == 'ok') {
                    clearInterval(this.intervalwx)
                    this.intervalwx = null
                    var _this = this
                    getMerchant(this.$store.state.user.id).then(response => {
                        // 更新余额
                        _this.merchant = response.data
                        // 取消扫码
                        _this.open = false
                        // 给出提示
                        _this.$notify({
                          title: '成功',
                          message: '支付成功',
                          type: 'success'
                        });
                      }
                    );
                  }
                })
              }, 1500);

            }).catch(err => {
              this.$message.error(err.message);
            });
          }
        });
      },
    }
  }

</script>
<style>
</style>
